<extend name="Base/common"/>
<block name="style">
   <style type="text/css">
 
   .top{
        width: 100%;
        height: 15%;
        /*background: #cc9;*/

   }
   .top img{
        display: block;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: #fff;
        margin: auto;
        margin-top: 5%;
        
   }
   .top p{
        margin:auto;
        font-size: 12px;
        text-align: center;
        margin-top:3%;
        letter-spacing:0;
        color:#898989;
    }
 
p{
        width: 90%;
        height: 45px;
        margin-left: 5%;
        margin-top:10px; 

    }
    p span{
        width: 25%;
        height: 45px;
        background: #EDEDED;
        border:1px solid #ccc;
        border-right: none;
        line-height: 45px;
        text-align: center;
        float: left;
    }
    p input{
        width: 65%;
        height: 45px;
        line-height: 45px;
        background: #fff;
        float: left;
        border:1px solid #ccc;
    }
    p select{
        width: 50%;
        height: 45px;
        background: #fff;
        float: left;
        border:1px solid #ccc;
    }
    p button{
        width: 25%;
        height: 45px;
        background: #EDEDED;
        border:1px solid #ccc;

        border-left: none;
        float: left;
    }

     label{
        display: block;
        height:33px;
        margin-top: 5px;
    }
    label input{
        width:68%;
        float: right;
    }
    label img{
        width:68%;
        height:97%;
        float: right;
        border-radius: 3px 3px;
        border:1px dashed #999;
        margin-top: -20px;
    }







</style>
</block>
<block name="body">
    <div>
            <div class="top">
                <p>对<font style="color:#009fe8">{$complainant}</font>发起的投诉</p>
                
            </div>
            
           

            <form action="{:U('tousu')}" method="post" style="height:40%;margin-top:-3%" enctype="multipart/form-data">
                <input type="hidden" name="complainant" value="{$complainant}">
                <p>
                    <span>支付订单号</span>
                    <input  name="trade_no"  style="width:65%;padding:7px 10px;border:1px solid #ccc;margin-right:10px;"/>
                </p>
                <p>
                    <span>订单金额</span>
                    <input  name="money"  style="width:65%;padding:7px 10px;border:1px solid #ccc;margin-right:10px;"/>
                </p>
                <p>
                    <span>付款账号</span>
                    <input  name="account"  style="width:65%;padding:7px 10px;border:1px solid #ccc;margin-right:10px;"/>
                </p>
                <p>
                    <span>您的姓名</span>
                    <input  name="complain"  style="width:65%;padding:7px 10px;border:1px solid #ccc;margin-right:10px;"/>
                </p>
                <p>
                    <span>您的号码</span>
                    <input  name="phone"  style="width:65%;padding:7px 10px;border:1px solid #ccc;margin-right:10px;"/>
                </p>
                
                
                    <label style="height:35%;width:80%;margin-left:5%">
                        <font style="diaplay:block;font:14px;">交易详情图</font>
                        <div class="up">
                            <input name="file" accept="image/*" type="file" id="file1" style="float:left">
                            <img src="" id="img" style="display:none;width:50%;height45%;">

                            <input name="pic" type="hidden" value="">          
                        </div>
                    </label>
                

                <textarea name="cause" style="resize:none;height:15%;width:80%;margin-left:5%;margin-top:10px;font-size:12px;border:1px solid #009fe8;" maxlength="150" cols="30" rows="5" placeholder="填写投诉原因(限150字内)"></textarea>
                
                
                <div class="top" style="margin-top:5%;margin-bottom:3%;">
                    <p style="margin-top:0;text-align:left;">
                        温馨提示：为了更好地反映问题，请务必上传交易单号、您的支付宝号、交易详情图（图片清晰），为了方便告知您处理结果，请填写您的姓名与手机号。
                    </p>
                </div>

                <button type="submit" class='login-btn'  style="background:#009fe8;width:85%;margin-left:7.5%;">提交</button>
                
                <!-- <button type="button" class='login-btn'  style="background:#009fe8;width:85%;margin-left:7.5%;">确认</button> -->
            </form>

            


    </div>
</block>
<block name="script">
   <script type="text/javascript">
        $('.up').change(function(){
            
                var formData = new FormData();
                formData.append("file", document.getElementById("file1").files[0]); 
                // alert(formData)  
                $.ajax({
                    url: "{:U('up')}",
                    type: "POST",
                    data: formData,
                    /**
                    *必须false才会自动加上正确的Content-Type
                    */
                    contentType: false,
                    /**
                    * 必须false才会避开jQuery对 formdata 的默认处理
                    * XMLHttpRequest会对 formdata 进行正确的处理
                    */
                    processData: false,
                    success: function (data) {
                       
                        if(data==''){

                        }else{
                            $('#img').attr('src','Uploads/'+data);

                            $('#img').next().attr('value',data);
                            $('#img').show();
                        }
                        
                        
                    },
                });
           
        

        })

   </script>

</block>